<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>view/workArea/parts/returnPartsFillinfo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/global.css">
		<link rel="stylesheet" href="../../../css/style.css">
		<link rel="stylesheet" href="../../../css/mui.picker.css">
		<link rel="stylesheet" href="../../../css/mui.poppicker.css">
		<style>
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
			
			
			.mui-preview-header .mui-preview-indicator {
				display: none;
			}
			
			#div {
				width: 0px;
				height: 0px;
				background: red;
				position: fixed;
				top: 70%;
				left: 50%;
			}
					
			/*移除底部或顶部三角,需要在删除此代码*/
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}
		</style>
		<style>
			input[type=text] {
			    padding: 10px 0 !important;
			}
			input[type=number] {
			    padding: 10px 0 !important;
			}
			
			.sel{
				font-size: 12px;
				margin-left: 10px;
				color: #ffffff;
				background: #ea1e1a;
				height: 20px;
				line-height: 12px !important;
				margin-top: 15px;
				border-radius: 5px;
				padding: 5px;
			}
			.selectxx{
				position: absolute;
				right: 10px;
			}
			.mui-btn-select{
				line-height: 3.125rem;
				color: #a9a9a9;
			}
			.warehouse{
				display: none;
			}
			/*  */
			.zp_sear .btnScan {
			    width: 42px;
			    height: 25px;
			    background: url(../../../images/icon_72.png) no-repeat center center;
			    background-size: 18px 18px;
			    float: right;
			    border-left: 0px solid #e3e3e3;
			    border-radius: 0;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">还库</h1>
		</header>
		<div class="mui-content">
			<div class="details_con" id="form_info">
				<div class="clum">
					<span class="name">物流方式<em class="t_red">*</em></span>
					<input type="hidden" id="Transtype" required="required" placeholder="请选择物流方式"/>
					<span class="txt">
						<button id='transtypeSel' class="mui-btn-select" type='button'>请选择物流方式</button>
					</span>
				</div>
				<!-- warehouse 仓库上门取件 -->
				<div class="clum warehouse">
					<span class="name">服务通知号</span>
					<input style="width: 40%;" type="number" id="serviceNo" class="d_ipt" placeholder="请输入服务通知号" />
					<span class="sel selectxx" id="selectAddressBtn">查询</span>
				</div>
				<!-- byOneself 自行退运 -->
				<div class="clum byOneself">
					<span class="name">快递单号<em class="t_red">*</em></span>
					<div class="zp_sear autoHeight" style="float: right;">
						<button class="btnScan" onclick="bindQrCode()"></button>
					</div>
					<input type="text" id="ReexpressNumber" class="d_ipt"  required="required" placeholder="请输入快递单号" />
				</div>
				<div class="clum byOneself">
					<span class="name">快递公司<em class="t_red">*</em></span>
					<input type="hidden" id="ReexpressCompany"/>
					<span class="txt">
						<button id='expressCompanySel' class="mui-btn-select" type='button'>请选择快递公司</button>
					</span>
				</div>
				<div class="clum">
					<span class="name">省份/城市<em class="t_red">*</em></span>
					<input type="hidden" id="Province"  required="required" placeholder="请选择省份/城市"/>
					<input type="hidden" id="City"  required="required" placeholder="请选择省份/城市"/>
					<span class="txt">
						<button id='showCityPicker3' class="mui-btn-select" type='button'>请选择收货地址</button>
					</span>
				</div>
				<div class="clum warehouse autoHeight" id="qujiandizhi">
					<span class="name">取件地址<em class="t_red">*</em></span>
					<div class="clear"></div>
					<textarea class="textarea" id="address" required="required" placeholder="请输入取件地址"></textarea> 
				</div>
				
				<!-- warehouse 仓库上门取件 -->
				<div class="clum warehouse autoHeight">
					<span class="name">联系信息<em class="t_red">*</em></span>
					<div class="clear"></div>
					<textarea class="textarea" id="contactinfo" required="required" placeholder="请输入联系信息"></textarea> 
				</div>
				<div class="clum warehouse">
					<span class="name">物重量&体积<em class="t_red">*</em></span>
					<input type="hidden" id="weight" required="required" placeholder="请选择物重量&体积"/>
					<span class="txt">
						<button id='weightSel' class="mui-btn-select" type='button'>请选择物重量&体积</button>
					</span>
				</div>
				<div class="clum warehouse">
					<span class="name">投保<em class="t_red">*</em></span>
					<input type="hidden" id="Insure" required="required" placeholder="请选择投保"/>
					<span class="txt">
						<button id='requestCCGSel' class="mui-btn-select" type='button'>请选择投保</button>
					</span>
				</div>
				<div class="clum warehouse">
					<span class="name">部门<em class="t_red">*</em></span>
					<input type="hidden" id="dept" required="required" placeholder="请选择部门"/>
					<span class="txt">
						<button id='functionSel' class="mui-btn-select" type='button'>请选择部门</button>
					</span>
				</div>
				<!-- <div class="clum autoHeight" class="imgAndDesc">
					<span class="name">上传照片<em class="t_red">*</em></span>
					<div class="clear"></div>
					<textarea class="textarea" id="Doa_pic" placeholder="请上传照片"></textarea> 
				</div> -->
				<div class="btn_box imgAndDesc">
					<input type="hidden" id="Doa_pic" placeholder="请上传照片"/>

					<span id="addPic" class="fl">上传照片</span>
					<span id="picView"></span>
				</div>
				<div style="line-height: 2.5rem; color: red; margin-right: 1.125rem; text-align: right" id="showPic">

				</div>
				<div class="clear"></div>
				<div class="clum autoHeight imgAndDesc" >
					<span class="name">故障描述<em class="t_red" id="redStar"></em></span>
					<div class="clear"></div>
					<textarea class="textarea" id="ProDesc" placeholder="请用英文填写故障排查过程&故障总结"></textarea> 
				</div>
				<div class="clum autoHeight">
					<span class="name">还货备注<em class="t_red">*</em></span>
					<div class="clear"></div>
					<textarea class="textarea" id="Remark" required="required" placeholder="请输入还货备注"></textarea> 
					<div class=" autoHeight" style="color: red; font-size:0.8125rem">
					消耗品报废及保外消耗只能单独操作，只需填写备注信息; 
					DOA 还货 子类型：外包装未破损，备件损坏，需注明英文故障描述
					</div>
				</div>				
				<div class="btn_box">
					<span class="fl" id="cancelBtn">取消</span>
					<span class="fr red" id="submitBtn">保存</span>
				</div>
				<div style="height: 50px;"></div>
			</div>
		</div>

		<!-- js代码 start -->

		<!-- 基础js start -->
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/utils/h.js"></script>
		<script src="../../../js/constant.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="../../../js/utils/base64.js"></script>
		<script src="../../../js/utils/md5.js"></script>
		<script src="../../../js/utils/sortMap.js"></script>
		<script src="../../../js/utils/http.js"></script>
		<script src="../../../js/app.js"></script>
		<!-- 基础js end -->
		<script src="../../../js/utils/rolldate.min.js"></script>
		<script src="../../../js/mui.picker.js"></script>
		<script src="../../../js/mui.poppicker.js"></script>
		<script src="../../../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mui.zoom.js"></script>
		<script src="../../../js/mui.previewimage.js"></script>
		<script type="text/javascript" charset="utf-8">
			var returnPartsKey = "FSE_ITEM_KEY_RETURN_PARTS";
			var addressData;
			(function($, doc) {
				mui.previewImage();
				var _getParam = function(obj, param) {
					return obj[param] || '';
				};
				
				$.init();
				
				$.back = function(event) {
					h.removeItem(returnPartsKey);
					plus.webview.currentWebview().close(); //退出申请也时，清空缓存
				};
				
				$.plusReady(function() {
					// 工程师id
					var enginnerId = app.getUser().enginnerId;
					// 从上一个页面取值
					var self = plus.webview.currentWebview();
					// 上页参数 —— 图片故障描述是否显示标识 1是 0否
					imgAndDesc = self.imgAndDesc;
					// 上页参数 —— 故障描述是否必填标识 1是 0否
					mustProDesc = self.mustProDesc;
					h('#transtypeSel').html("自行退运")
					h('#Transtype').val(1)
					h('#Remark').val('上海市浦东新区远航路958号2号仓库，展通国际物流  收件人：王君 赛默飞还库备件   联系电话：18001959110')
					// 获取cc省市区数据
					getAddressData();
					// 图片与描述显示控制
					if (imgAndDesc) {
						h(".imgAndDesc").show();
						h("#Doa_pic").attr("required", "required");
						if (mustProDesc) {
							h("#ProDesc").attr("required", "required");
							h("#redStar").html("*");
						}
					} else {
						h(".imgAndDesc").hide();
					}
					
					// 收货地址二级联动
					h('#showCityPicker3').tap(function() {
						var cityPicker3 = new $.PopPicker({
							// layer: 3
							layer: 3 // 设为2级联动
						});
						cityPicker3.setData(addressData);
						cityPicker3.show(function(items) {
							h("#showCityPicker3").html( _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text'));
							h("#Province").val(_getParam(items[0], 'value'));
							h("#City").val(_getParam(items[1], 'value'));
							// h("#address").val(_getParam(items[2], 'text'));
						});
					});
					
					// 物流方式(还货类型)下拉
					h('#transtypeSel').tap(function() {
						document.activeElement.blur();
						app.hideSoftKeybord();
						var userPicker = new $.PopPicker();
						app.showWaiting('加载中...')
						ajaxGetJson(BASE_URL + 'cc/dict/selectCCDict', {
							tableName: 'TransportType',
							engineerId: enginnerId
						}, function(data) {
							app.closeWaiting()
							if (!data) {
								app.toast("无还货类型数据")
								return
							}
							userPicker.setData(data);
							userPicker.show(function(items) {
								h('#transtypeSel').html(items[0].text)
								h('#Transtype').val(items[0].value)
								// 判断物流方式，控制页面隐藏于显示
								if (items[0].value == 1) { //自行退运
									h(".byOneself").show();
									h(".warehouse").hide();
									h("#qujiandizhi").hide()
									h('#Remark').val('上海市浦东新区远航路958号2号仓库，展通国际物流  收件人：王君 赛默飞还库备件   联系电话：18001959110')
								} else { //仓库上门取件
									h(".byOneself").hide();
									h(".warehouse").show();
									h("#qujiandizhi").show()
									h('#Remark').val('上海市浦东新区远航路958号2号仓库，展通国际物流  收件人：王君 赛默飞还库备件   联系电话：18001959110')
								}
								userPicker.dispose()
							});
						});
					});
					
					// 物流公司下拉
					h('#expressCompanySel').tap(function() {
						document.activeElement.blur();
						app.hideSoftKeybord();
						var userPicker = new $.PopPicker();
						app.showWaiting('加载中...')
						ajaxGetJson(BASE_URL + 'cc/dict/selectCCDict', {
							tableName: 'ExpressCompany',
							engineerId: enginnerId
						}, function(data) {
							app.closeWaiting()
							// console.log(JSON.stringify(data))
							if (!data) {
								app.toast("无还货类型数据")
								return
							}
							userPicker.setData(data);
							userPicker.show(function(items) {
								h('#expressCompanySel').html(items[0].text)
								h('#ReexpressCompany').val(items[0].value)
								userPicker.dispose()
							});
						});
					});
					
					// 重量
					h('#weightSel').tap(function() {
						document.activeElement.blur();
						app.hideSoftKeybord();
						var userPicker = new $.PopPicker();
						userPicker.setData([{value: '1', text: '<20 kg'},{value: '2', text: '20-70 kg'},{value: '3', text: '>70 kg'}]);
						userPicker.show(function(items) {
							h('#weightSel').html(items[0].text)
							h('#weight').val(items[0].value)
							userPicker.dispose()
						});
					});
					
					// 投保
					h('#requestCCGSel').tap(function() {
						document.activeElement.blur();
						app.hideSoftKeybord();
						var userPicker = new $.PopPicker();
						app.showWaiting('加载中...')
						ajaxGetJson(BASE_URL + 'cc/dict/selectCCDict', {
							tableName: 'RequestCCG',
							engineerId: enginnerId
						}, function(data) {
							app.closeWaiting()
							// console.log(JSON.stringify(data))
							if (!data) {
								app.toast("无还货类型数据")
								return
							}
							userPicker.setData(data);
							userPicker.show(function(items) {
								h('#requestCCGSel').html(items[0].text)
								h('#Insure').val(items[0].value)
								userPicker.dispose()
							});
						});
					});
					
					// 部门
					h('#functionSel').tap(function() {
						document.activeElement.blur();
						app.hideSoftKeybord();
						var userPicker = new $.PopPicker();
						app.showWaiting('加载中...')
						ajaxGetJson(BASE_URL + 'cc/dict/selectCCDict', {
							tableName: 'Function',
							engineerId: enginnerId
						}, function(data) {
							app.closeWaiting()
							// console.log(JSON.stringify(data))
							if (!data) {
								app.toast("无还货类型数据")
								return
							}
							userPicker.setData(data);
							userPicker.show(function(items) {
								h('#functionSel').html(items[0].text)
								h('#dept').val(items[0].value)
								userPicker.dispose()
							});
						});
					});
					
					// 服务单号查询地址
					h('#selectAddressBtn').tap(function() {
						if (h("#serviceNo").val() == "") {
							app.toast("请输入服务通知号");
							return false;
						}
						app.showWaiting('加载中...')
						ajaxGet(BASE_URL + "cc/notice/getDetailsByServiceNo", {"serviceNo": h("#serviceNo").val()}, function(data) {
							app.closeWaiting()
							// console.log(JSON.stringify(data));
							if (data.code == 200) {//查询成功
								// app.toast("保存成功");
								h("#showCityPicker3").html(data.data.province + data.data.city);
								h("#Province").val(data.data.province);
								h("#City").val(data.data.city);
								h("#address").val(data.data.homeAddress);
							} else {//查询失败
								app.toast("查询无结果");
							}
						}, function(errorMsg) {
							app.closeWaiting()
							console.log(JSON.stringify(errorMsg))
						});
					});
					
					// 添加图片
					h('#addPic').tap(function() {
						app.jumpTo('pictureAdd.html', 'view/workArea/parts/pictureAdd');
					});
					
					// 提交保存
					h('#submitBtn').tap(function() {
						var formObj = {"enginner_id" : enginnerId}; //POST参数对象
						var subFlag = true;
						var Transtype = h("#Transtype").val();
						mui("#form_info input, #form_info textarea").each(function(index, item) {
							var value = item.value;
							var name = item.getAttribute("id");
							// 物流方式不同必填项不同
							var parentClass = h(this).parent().attr("class");
							if (Transtype == "1" && parentClass.indexOf("warehouse") >= 0) {
								// 自行退运时的必填项
								return true; //true: continue; false: break
							} else if (Transtype == "2" && parentClass.indexOf("byOneself") >= 0) {
								// 仓库上门取件的必填项
								return true; //true: continue; false: break
							}
							// 校验必填
							var required = item.getAttribute("required");
							if (required && !value) {
								subFlag = false;
								app.toast(item.getAttribute("placeholder"));
								return false;
							}
							// 参数赋值
							formObj[name] = value;
						});
						// console.log(JSON.stringify(formObj))
						
						if (subFlag) {
							var postParam = {
								"bindReturn" : JSON.stringify(formObj),
								"bindReturnPartInfo" :  h.getItem(returnPartsKey)
							}
							app.showWaiting('加载中...')
							
							// 提交数据
							ajaxPost(BASE_URL + "cc/spareParts/partBindReturnHandle", postParam, function(data) {
								app.closeWaiting()
								// console.log(JSON.stringify(data));
								if (data.code == 200) {
									var dataObj = JSON.parse(data.data);
									var status = dataObj.status;
									if (status == "1") {
										// cc接口返回成功
										app.toast("还库成功");
										
										// 返回上一页并刷新
										var priorPage = plus.webview.getWebviewById('view/workArea/parts/returnParts');
										priorPage.evalJS('selectList()')
										$.back()
									} else {
										// cc接口返回失败
										app.toast(dataObj.message);
									}
								} else {
									//还货失败
									app.toast(data.msg);
								}
							}, function(errorMsg) {
								app.closeWaiting()
								console.log(JSON.stringify(errorMsg))
							});
						}
					});
					
					// 还货取消
					h('#cancelBtn').tap(function() {
						// 清空缓存
						h.removeItem(returnPartsKey);
						// 返回上一页
						$.back();
					});
				});
			}(mui, document));
			
			function addPictureSuccess(size, filePath, fileName) {
				// console.log("图片添加成功")
				h('#picsize').val(size)
				h('#Doa_pic').val(filePath)
				var html = '<span data-preview-src="'+ BASE_PROFILE_URL + filePath +'" data-preview-group="0" id="showPic">'+ fileName +'</span>'
				h('#showPic').html(html)
			}
			
			function updatePictureSize(size) {
				h('#picsize').val(size)
			}
			
			function getAddressData() {
				ajaxGet(BASE_URL + "cc/spareParts/ccAddressData",{
					"enginner_id": ""
				}, function(data) {
					// console.log(JSON.stringify(data));
					if (data.code === 200) {
						addressData = data.data;
					} else {
						// app.toast(data.msg)
					}
				}, function(errorMsg) {
					// app.toast(errorMsg)
				});
			}
			
			// 绑定二维码按钮
			function bindQrCode(){
				var serial_no = "returnParts";
				// app.toast(serial_no)
				app.jumpTo("/view/barcode/barcode.html","view/barcode/barcode.html",{
					"state": serial_no
				})
			}
			
			// 扫码回调方法
			function scaned(type, code, file, state) {
				// 第一版弹窗回显方式（不可用已过时）
				// h("#partCode").val(code);
				
				// 第二版列表回显方式
				h("#ReexpressNumber").val(code);
			}
			
		</script>
		<!-- js代码 end -->
	</body>
</html>
